import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'

import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft'
import Home from 'material-ui-icons/Home'
import AppBar from 'material-ui/AppBar';
import { withStyles } from 'material-ui/styles'

import createStyle from './style'

class CommonHeader extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
    this.back = this.back.bind(this)
  }
  componentDidMount() {

  }
  back() {
    this.props.history.goBack();
  }
  render() {
    const {
      classes,
      title,
    } = this.props
    return (
      <div className={classes.header}>
        <AppBar
          className={classes.appBar}
        >
          <KeyboardArrowLeft className={classes.userIcon} onClick={this.back} />
          <span className={classes.appBarTitle}>{title}</span>
          <Link to="/" style={{ color: '#fff' }}>
            <Home className={classes.searchIcon} />
          </Link>
        </AppBar>
      </div>
    )
  }
}
export default withRouter(withStyles(createStyle)(CommonHeader))
CommonHeader.propTypes = {
  classes: PropTypes.objectOf(Object),
  history: PropTypes.objectOf(Object),
  title: PropTypes.string,
}
